<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/lib/vue/vue3.1.1.js"></script>
    <style>

    </style>
</head>
<body>

<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>


</div>


<script>

    const app = Vue.createApp({
        data() {
            return {
                message: '',
                message2: '菜鸟教程\r\nhttps://www.runoob.com',
                checked: false,
                checkedNames: [],
                picked: 'Runoob',
                selected: '',
                options: [
                    {text: 'Runoob', value: 'www.runoob.com'},
                    {text: 'Google', value: 'www.google.com'},
                    {text: 'Taobao', value: 'www.taobao.com'}
                ]
            }
        },
        directives: {
            focus: {
                // 指令的定义
                mounted(el) {
                    el.focus()
                }
            }
        }
    })

    // 注册一个全局自定义指令 `v-focus`
    app.directive('focus', {
        // 当被绑定的元素挂载到 DOM 中时……
        mounted(el) {
            // 聚焦元素
            el.focus()
        }
    })

    app.directive('my-directive', {
        // 指令是具有一组生命周期的钩子：
        // 在绑定元素的 attribute 或事件监听器被应用之前调用
        created() {},
        // 在绑定元素的父组件挂载之前调用
        beforeMount() {},
        // 绑定元素的父组件被挂载时调用
        mounted() {},
        // 在包含组件的 VNode 更新之前调用
        beforeUpdate() {},
        // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
        updated() {},
        // 在绑定元素的父组件卸载之前调用
        beforeUnmount() {},
        // 卸载绑定元素的父组件时调用
        unmounted() {}
    })
    app.directive('my-directive', () => {
        // 这将被作为 `mounted` 和 `updated` 调用
    })

    app.mount('#app')

</script>
</body>
</html>